import React from "react"
import { NavBar, Icon } from 'antd-mobile';
import {top} from "../api/Discover"
class Top extends React.Component{
    constructor(){
        super()
        this.state={
          topsong:[]
        }
    }
 
    onClick(){
        console.log(this.props)
        this.props.history.push("/Discover")
    }
    componentWillMount(){
        top().then(res=>{
            console.log(res)
            let array=res.data.list
            console.log(array)
            this.setState({
                topsong:array
            })
        })
    }

render(){
    return(
        <div>
         <NavBar className="top_NavBar"
                mode="light"
                icon={<Icon type="left" onClick={this.onClick.bind(this)} style={{color:"#000"}}/>}
                onLeftClick={() => console.log('onLeftClick')}
                rightContent={[
                   
                    <Icon key="1" style={{ marginLeft: '16px' ,background:'url('+require('../img/正在播放.png')+') center center /  23px 23px no-repeat' }} />,
                ]}
            >排行榜</NavBar>
                <ul className="top_ul">
                {this.state.topsong.map(function(item,index){
                    return(
                        <li className="top_song_li">
                            <img src={item.coverImgUrl}  alt=""/>
                            {/* {item.name} */}
                            <div>
                            {item.tracks.map(function(item,index){
                                return(
                                    <div className="top_div">
                                    <p className="top_p">{index+1}. {item.first}</p>
                                    <p className="top_song">{item.second}</p>
                                    </div>
                                )
                            })}
                            </div>

                            <p></p>
                        </li>
                    )
                })}
                </ul>

        </div>
    )
}

}
export default Top